import React, { Component } from 'react';
import { Card, Row, Col, Input, Radio, Button, message } from 'antd';
import './index.css';

export default class StudentSearchBar extends Component {

    constructor(props) {
        super(props);
        const def = {
            key: '',
            sex: -1
        };
        this.state = Object.assign({}, def, this.props.defaultValue);
    };



    handleSearch = () => {
        // console.log(params)
        if (this.props.onSearch) {
            this.props.onSearch(this.state);
        };
    }

    handleReset = () => {
        // this.setState({ key: '', sex: -1 });
        // this.setState(state => {
        //     console.log(state);
        //     return {
        //         key: '',
        //         sex: -1
        //     }
        // }, () => {
        //     if (this.props.onReset) {
        //         this.props.onReset(this.state);
        //     };
        // })
        this.setState({ key: '', sex: -1 }, () => {
            if (this.props.onReset) {
                this.props.onReset(this.state);
            };
        })
    }

    render() {
        return (
            <div>
                <Card>
                    <Row justify={'space-around'}>
                        <Col span={7} className='col'>
                            <label>关键字：</label>
                            <Input placeholder="请输入关键字" value={this.state.key} onChange={e => {
                                this.setState({ key: e.target.value })
                            }} />
                        </Col>
                        <Col span={7} className='col'>
                            <label>性别：</label>
                            <Radio.Group value={this.state.sex} onChange={e => {
                                this.setState({ sex: e.target.value })
                            }}>
                                <Radio value={-1}>不限</Radio>
                                <Radio value={0}>男</Radio>
                                <Radio value={1}>女</Radio>
                            </Radio.Group>
                        </Col>
                        <Col span={7} className='col'>
                            <Button type="primary" style={{ marginRight: '30px' }} onClick={e => this.handleSearch()}>查询</Button>
                            <Button onClick={e => {
                                this.handleReset();
                            }}>重置</Button>
                        </Col>
                    </Row>
                </Card>
            </div>
        )
    }
}
